<script setup lang="ts">
import { ref } from "@vue/reactivity";
import { getCurrentInstance, onMounted } from "@vue/runtime-core";
// 此时要进行一下类型断言了
let { appContext } = <any>getCurrentInstance();
const { $fileURLToPath } = appContext.config.globalProperties;

type Props = {
  imgs?: { src?: string; title?: string }[];
};
let prop = withDefaults(defineProps<Props>(), {
  imgs: () => [],
});

console.log("prop.imgs", prop.imgs);
// let list = prop.imgs;
// console.log("list ==", list);
let aa = prop.imgs;
console.log(aa);
let list = [
  {
    src: "1.jpg",
    title: "【现场接听】市消防救援支队到市热线参加现场接听活动",
  },
  {
    src: "2.png",
    title: "【诉求办理】市热线办件选登",
  },
  {
    src: "3.jpg",
    title: "【现场接听】市投资促进局到市热线参加现场接听活动",
  },
  {
    src: "4.jpg",
    title: "【诉求办理】市热线办件选登",
  },
  {
    src: "5.png",
    title: "【热线动态】市热线微信公众号数据分析（2022年第三季度）",
  },
];

// 当前图片索引值
let index = ref(1);
// 动画过渡的时间
const times = 0.6;
let duration = ref(times);
// 数组的长度
let ll = list.length;
// 素组的长度加一
let len = ll + 1;
// 下标值既对应原来数组的下标了
let subscript = ref(0);

let id = setInterval(() => {
  index.value++;
  // 每次都改变下标值，该下标值主要是用于提示文本和小圆点的
  subscript.value++;
  // 当下标值大于，数组的长度时，就重置为0
  if (subscript.value >= ll) {
    subscript.value = 0;
  }
  // 当轮播到最后一张图片时，动画效果结束后，马上回到第一张
  if (index.value == len) {
    // 开启一个定时器，进入倒计时，等待动画效果执行完后，将图片设置为第一张，且此时过渡时间为 0
    let id1 = setTimeout(() => {
      // 过渡时间为0，过渡效果不出现
      duration.value = 0;
      // 将图片索引设置为第一张
      index.value = 1;
      // 当图片回到第一张后，又把过渡时间设置初始值，让过渡效果再次出现
      let id2 = setTimeout(() => {
        duration.value = times;
        // 清除恢复动画效果的定时器
        clearTimeout(id2);
        // 稍微让它延迟一下，目的是让索引图片回到第一张后，再恢复动画效果的
      }, 0.06 * 1000);

      // 清除定时器
      clearTimeout(id1);
      // 此处的时间是等待动画效果结束后的时间
    }, times * 1000);
  }

  // 每隔两秒开始一个定时器
}, 2.5 * 1000);

let arrow = (i: number) => {
  console.log("i ==", i);
};
</script>

<template>
  <!-- 动画效果时间 -->
  <div
    class="swipers"
    :style="{
      '--duration': duration + 's',
      '--index': index,
    }"
  >
    <div class="content">
      <!-- 最后一张图片 -->
      <img :src="$fileURLToPath('index/bar' + list[4].src)" alt="图片" />
      <img
        v-for="(v, k) of list"
        :key="k"
        :src="$fileURLToPath('index/bar' + v.src)"
        alt="图片"
      />
      <!-- 第一张图片 -->
      <img :src="$fileURLToPath('index/bar' + list[0].src)" alt="图片" />
    </div>
    <!-- 左按钮 -->
    <span class="arrow prev" @click.stop="arrow(1)">&#xed1d;</span>
    <!-- 右按钮 -->
    <span class="arrow next" @click.stop="arrow(-1)">&#xed1e;</span>
    <!-- 文本提示，小点点 -->
    <div class="footer">
      <p class="title">{{ list[subscript]?.title }}</p>
      <div class="tips">
        <span
          :class="subscript == k ? 'tipSpan' : ''"
          v-for="(v, k) of ll"
          :key="k"
        ></span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.swipers {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  grid-column-start: span 2;
  background-color: transparent;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  background: blue;
  transform: translateX(calc(var(--index) * -100%));
  transition-property: transform;
  transition-duration: var(--duration);

  img {
    flex: none;
    width: 100%;
    height: 100%;
  }
}

// 左右小按钮--
.arrow {
  position: absolute;
  top: 50%;
  width: 25px;
  height: 35px;
  transform: translateY(-50%);
  @include flexCenterCenter;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease;
  &:hover {
    background-color: rgba(0, 0, 0, 0.4);
  }
}
.prev {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  left: -1px;
}
.next {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  right: -1px;
}
// 左右小按钮==

//
.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  font-size: 16px;
  padding: 0px 16px;
  color: #ffffff;
}

.title {
  flex: 1;
  display: flex;
  align-items: center;
}

.tips {
  @include flexCenterCenter;
  height: 100%;
  display: flex;
  gap: 0px 12px;
  cursor: pointer;
  > span {
    width: 10px;
    height: 10px;
    border: 1px solid #ffffff;
    border-radius: 50px;
    transition: width 0.2s;
    transform-origin: center center;
  }
  .tipSpan {
    width: 20px;
    background-color: #fff;
  }
}
</style>
